<template>
  <div class="home">
    <div class="headers">
      <div class="headers-main">
        <HandeR></HandeR>
        <ly-tab 
        v-model="selectedId" 
        :items="items" 
        :options="options"
        @change="changeTab"
        >
        </ly-tab>
      </div>
    </div>
    <section class="wrapper">
      <div>
        <div v-for="(item,index) in newData" :key="index">
          <SwipeR 
            v-if="item.type =='swiperList'"
            :swiperList="item.data"
          ></SwipeR>
          <IconS 
            v-if="item.type =='iconsList'"
            :iconsList="item.data"
          > </IconS>
          <RecommenD  
            v-if="item.type =='recommendList'"
            :recommendList="item.data"
          ></RecommenD>
          
          <AD 
            v-if="item.type =='adList'"
            :adList="item.data"
          ></AD>
          <LikE 
            v-if="item.type =='likeList'"
            :likeList="item.data"
          ></LikE>
        </div>
        
      </div>
    </section>
    <TabbaR></TabbaR>
  </div>
  
</template>

<script>

import HandeR from '@/components/home/HandeR.vue'
import TabbaR from '@/components/common/TabbaR.vue'
import SwipeR from '@/components/home/SwipeR.vue'
import IconS from '@/components/home/IconS.vue'
import RecommenD from '@/components/home/RecommenD.vue'
import LikE from '@/components/home/LikE.vue'
import AD from '@/components/home/AD.vue'
import http from '@/common/api/request'

//引入插件

// import BScroll from 'better-scroll'
import BetterScroll from 'better-scroll'
export default {
  name: "HomeView",
  components:{
    TabbaR,
    HandeR,
    SwipeR,
    IconS,
    RecommenD,
    LikE,
    AD,
  },
  data(){
    return {
      selectedId:0,
      items:[],
      newData:[],
      oBetterScroll:'',
      tBetterScroll:'',
      options:{
        activeColor:'#1d98bd'
        //可以在这里制定labelKey为你数据里文字对应的字段
      },
    }
  },
  mounted(){
    // let scroll = new BScroll('.wrapper')
  //   let bs = new BetterScroll('.wrapper',{
  //     movable:true,
  //     zoom:true
	// })
  },
  methods:{
    async getData(){

    let res = await http.$axios({
      url:'/api/index_list/0/data/1'
    }) 
    this.items = Object.freeze(res.topBar) 
    this.newData = Object.freeze(res.data)

      //当dom都加载完毕了再去执行
    this.oBetterScroll= this.$nextTick(() =>{
	  let bs = new BetterScroll('.wrapper',{
          movable:true,
          zoom:true,
          click:true,
        })
      })
    },
    async addData(index){
      let res = await http.$axios({
        url:'/api/index_list/'+index+'/data/1',
      });
      if(res.constructor != Array){
        this.newData = res.data;
      }else{
        this.newData = res;
      }
      this.tBetterScroll=this.$nextTick(() =>{
	    let bs = new BetterScroll('.wrapper',{
            movable:true,
            zoom:true
        })
      })
    },
    changeTab(item,index){
      this.addData(index);
    },
  },
  created(){
    this.getData();
  }
};
</script>
<style scoped>
.home{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.headers{
  width: 100%;
  height: 2.88rem;
}
.headers-main{
  position: fixed;
  left: 0;
  top: 0;
}
section{
  flex: 1;
  overflow: hidden;
  margin-top:0 ;
}
::v-deep .ly-tabbar{
  box-shadow: none;
  border-bottom: none;
} 

</style>

